<template>
    <!-- 排产流转卡示意图 -->
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%" id="circulCardSplit">
            <PageTabelLayout>
                <template #pageHeader>
                    <div class="my-header" style="padding:10px;box-sizing: border-box;" v-if="headerShow">
                        <a-form size="small" :model="searchData" auto-label-width layout="inline">
                            <a-form-item label="染缸容量">
                                <a-input-number :min="0" v-model="searchData.capacity" class="bacClass" style="width:200px" allow-clear />
                            </a-form-item>
                            <a-form-item label="生产车间">
                                <a-input class="bacClass" style="width:200px" allow-clear v-model="searchData.workshop" />
                            </a-form-item>
                        </a-form>
                    </div>
                    <div class="my-divisders">
                        <a-divider orientation="center">
                            <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                            <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                        </a-divider>
                    </div>
                    <div class="my-tool-bar" style="margin:0px 10px 10px 0px;">
                        <Toolbar :items="['查询']" @select="selectHandler" />
                    </div>
                </template>
                <template #pageTabel>
                    <div style="height: 100%;">
                        <div class="pageTabel">
                            <a-row :gutter="3" align="center">
                                <h3 style="font-weight: bold;">流转背景颜色的意义：</h3>
                                <a-col :xxl="2" :xl="2" :lg="4" :md="4" :xs="8">
                                    <div>拼缸颜色 <a-tag size="small" color="#f59a23" /></div>
                                </a-col>
                                <a-col :xxl="2" :xl="2" :lg="4" :md="4" :xs="8">
                                    <div>回修颜色 <a-tag size="small" color="#ffff80" /></div>
                                </a-col>
                                <a-col :xxl="3" :xl="3" :lg="6" :md="12" :xs="24">
                                    <div>流程卡加急颜色 <a-tag size="small" color="#c280ff" /></div>
                                </a-col>
                                <a-col :xxl="3" :xl="3" :lg="6" :md="12" :xs="24">
                                    <div>流程卡停机颜色 <a-tag size="small" color="#d9001b" /></div>
                                </a-col>
                                <a-col :xxl="3" :xl="3" :lg="6" :md="12" :xs="24">
                                    <div>其他情况,流程卡颜色 <a-tag size="small" color="#81d3f8" /></div>
                                </a-col>
                            </a-row>
                        </div>

                        <a-row class="tableBox" style="height: 100%;margin-bottom: 100px;">
                            <a-col :span="1">
                                <div class="tablesHeadFirst" style="padding: 10px 10px;">容量</div>
                                <div style="padding: 10px 10px;">行号</div>
                            </a-col>
                            <a-col :span="23" style="overflow-x: auto;white-space:nowrap;width: 100%;">
                                <div class="tablesHeadFirst">
                                    <div class="tablesItems"
                                        :style="{ 'text-align': 'center', 'display': 'line-block', 'width': (item.colspan * 270) + 'px', }"
                                        v-for="(item, index) in machineObj.headTitle" :key="index">{{ item.capacity }}</div>
                                </div>
                                <div>
                                    <div style="text-align: center;width:270px;display: inline-block;"
                                        v-for="(item, index) in machineObj.secondTitle" :key="index"> {{ item.secondCapacity
                                        }}</div>
                                </div>
                                <div class="colBody" id="colBody"
                                    style="display: flex;overflow-y: auto;height:calc(100vh - 400px)">
                                    <!-- @mousedown="downFlagMove" @mousemove="toHasMove" @mouseup="clearSelect" @mouseleave="clearSelect" -->
                                    <div v-for="(item, index) in machineObj.childCont"
                                        style="display: flex;flex-direction: column;" :key="index">
                                        <template v-for="(childItem, cIndex) in item" :key="cIndex">
                                            <div :style="{ 'display': 'flex', 'border-right': 'none', 'border': childItem.selected ? '1px solid #000' : '' }"
                                                @click="selectCell($event, index, cIndex)">
                                                <a-popover position="right" trigger="contextMenu" v-model="visible">
                                                    <div :style="{
                                                        'background-color': childItem.colorState === 1 && '#f59a23' ||
                                                            childItem.colorState === 2 && '#ffff80' ||
                                                            childItem.colorState === 3 && '#c280ff' ||
                                                            childItem.colorState === 4 && '#d9001b' || '#81d3f8',
                                                        'padding': '20px', 'white-space': 'nowrap',
                                                    }">
                                                        <p> {{ childItem.flowCardCode }}</p>
                                                        <p> {{ childItem.customCode }}</p>
                                                        <p> {{ childItem.colorInfo }}</p>
                                                        <p> {{ childItem.greyCode }} T/C双染</p>
                                                        <p> 染色开始时间: {{ childItem.startDate }}</p>
                                                        <p> 毛坯出片已己经完成</p>
                                                    </div>
                                                    <template #content>
                                                        <div style="line-height: 30px;">
                                                            <p class="contClick" v-if="cIndex !== 0"
                                                                @click="changeSeat(item[cIndex], item[cIndex - 1])">生产位置上移
                                                            </p>
                                                            <p class="contClick" v-if="cIndex !== item.length - 1"
                                                                @click="changeSeat(item[cIndex], item[cIndex + 1])">生产位置下移
                                                            </p>
                                                            <a-divider />
                                                            <p class="contClick" @click="pageData.isShowList = true">
                                                                提取未排产流转卡号列表
                                                            </p>
                                                            <p class="contClick"
                                                                @click="cancelProd(childItem.flowCardCode)">
                                                                取消排缸
                                                                退回至 未排产订单列表</p>
                                                            <p class="contClick"
                                                                @click="setMachine(childItem.flowCardCode)">
                                                                生产调缸设置
                                                            </p>
                                                            <p class="contClick" @click="setOnCard">拼缸设置确认</p>
                                                            <p class="contClick" @click="setOnCardCancel">拼缸设置取消</p>

                                                            <p class="contClick"
                                                                @click="confirmDye(childItem.flowCardCode)">
                                                                染色完成
                                                            </p>
                                                            <p class="contClick"
                                                                @click="setHant(childItem.colorState, childItem.flowCardCode)">
                                                                停机/取消停机</p>
                                                            <p class="contClick" @click="toCancelSelect(index, cIndex)">取消选择
                                                            </p>
                                                            <p class="contClick" @click="toCancelAllSelect">取消全部选择</p>
                                                        </div>
                                                    </template>
                                                </a-popover>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </a-col>
                        </a-row>
                        <!-- <div id="moveSelected"
                            :style="{ 'width': moveSelectObj.width, 'height': moveSelectObj.height, 'top': moveSelectObj.top, 'right': moveSelectObj.right, 'left': moveSelectObj.left, 'bottom': moveSelectObj.bottom, }">
                        </div> -->
                    </div>
                </template>
            </PageTabelLayout>
            <a-drawer :drawer-style="{ zIndex: 9999 }" :mask-closable="false" :width="400" :visible="pageData.isShowSet"
                unmountOnClose @ok="sideOk" @cancel="pageData.isShowSet = false" cancel-text="关闭" ok-text="保存">
                <template #title>
                    生产调缸调整
                </template>
                <a-form ref="formRef" layout="horizontal" auto-label-width :model="setForm">
                    <a-form-item label="目标设备号" field="craftDepth" :validate-trigger="['change', 'blur']"
                        :rules="[{ required: true, message: '目标设备号必填' }]">
                        <a-input class="bacClass" v-model="setForm.machineCode" />
                    </a-form-item>
                </a-form>
            </a-drawer>
            <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.isShowList"
                :mask-closable="false" placement="bottom" @cancel="pageData.isShowList = false">
                <template #title>
                    提取未排产流转卡号列表
                </template>
                <a-form ref="formRef" style="margin-top:20px" layout="horizontal" auto-label-width :model="cardForm">
                    <a-row :gutter="20">
                        <a-col :xxl="6" :xl="12" :lg="12" :md="24" :xs="24">
                            <a-form-item label="流转卡号" field="grayCode" :rules="[{ message: '流转卡号必填' }]"
                                :validate-trigger="['change', 'blur']">
                                <a-input allow-clear class="bacClass" v-model="cardForm.flowCardCode" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="6" :xl="12" :lg="12" :md="24" :xs="24">
                            <a-form-item label="计划单号">
                                <a-input allow-clear class="bacClass" v-model="cardForm.planOrderCode" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="6" :xl="12" :lg="12" :md="24" :xs="24">
                            <a-form-item label="客户名称">
                                <a-input allow-clear class="bacClass" v-model="cardForm.customName" />
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="6" :xl="12" :lg="12" :md="24" :xs="24">
                            <a-form-item label="日期">
                                <a-range-picker  popup-container="html"  class="bacClass" @change="changeDate" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="20">
                        <a-col :xxl="6" :xl="12" :lg="12" :md="24" :xs="24">
                            <a-form-item label="班次">
                                <a-select popup-container="html"  style="width: 270px;">
                                    <a-option />
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="6" :xl="12" :lg="12" :md="24" :xs="24">
                            <a-form-item label="染色类型">
                                <a-select popup-container="html"  style="width: 270px;" allow-clear allow-search @search="searchHandler($event, 1)"
                                    @focus="selectAwait(1)">
                                    <a-option v-for="item in pageData.machinList" :key="item.id" :value="item.machinType">{{
                                        item.machinType }}</a-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="6" :xl="12" :lg="12" :md="24" :xs="24">
                            <a-form-item label="染缸设备编号">
                                <a-select popup-container="html"  style="width: 270px;" allow-clear allow-search @search="searchHandler($event, 2)"
                                    @focus="selectAwait(2)">
                                    <a-option v-for="item in pageData.fieldList" :key="item.id" :value="item.field">{{
                                        item.field }}</a-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :xxl="6" :xl="12" :lg="12" :md="24" :xs="24">
                            <a-form-item label="染色开始时间">
                                <a-date-picker  popup-container="html"  showTime allow-clear class="bacClass" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
                <div class="my-tool-bar" style="margin-bottom: 10px;">
                    <Toolbar :items="['查询']" @select="selectCardHandler" />
                </div>

                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                    @grid-ready="gridReady" style="height:75%" class='ag-theme-alpine' :defaultColDef="defaultColDef"
                    :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData" />
                <paginationCopys :total="total" show-total show-jumper show-page-size @change="changePage"
                    @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
                    :page-size="pagination.pageSize" :current="pagination.page" />
                <template #footer>
                    <a-button size="mini" @click="pageData.isShowList = false">
                        关闭
                    </a-button>
                    <a-button type="primary" size="mini" @click="saveHandler">
                        保存
                    </a-button>
                </template>
            </a-drawer>
        </div>
    </div>
</template>

<script lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { reactive, ref, onMounted } from 'vue'
import emitter from "@/hooks/useEventBus";
import { useTable, usePagination } from '@/hooks/table'

import { localeText } from '@/api/aggridZw'
import { machine, otherMachineFn } from '@/api/DyeingshopManagement/machineCard'
import { FormInstance, Message, Modal } from '@arco-design/web-vue';
export default {
    name: "prodScheduCirculDiagrammatic",
    setup() {
        const machineApi = machine();
        const headerShow = ref<boolean>(true);
        const visible = ref<boolean>(false)
        let machineObj = ref<any>({});
        const searchData = reactive<{
            workshop: string,
            capacity: number
        }>({
            workshop: '',
            capacity: 0,
        });
        const setForm = reactive<{
            flowCardCode: string,
            machineCode: string
        }>({
            flowCardCode: '',
            machineCode: ''
        });
        const changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        onMounted(() => {
            selectHandler();
        });
        const selectHandler = async () => {
            pageData.loading = true;
            machineObj.value = {};
            await machineApi.getInfoByMachine({ ...searchData }).then((res: any) => {
                //  machineObj.value = [];
                if (res.code === 200) {
                    let resData = res.data;
                    let newArr: any[] = [];
                    let childArr: any[] = [];
                    let listenChild: any[] = [];
                    for (let key in resData) {
                        let colspan = 0;
                        for (let itemKey in resData[key]) {
                            // childArr.push({secondCapacity:itemKey,child:resData[key][itemKey]})
                            colspan += 1;
                            childArr.push({ secondCapacity: itemKey });
                            listenChild.push([...resData[key][itemKey]]);
                        }

                        newArr.push({ capacity: key, colspan });
                    };
                    pageData.loading = false;
                    machineObj.value.headTitle = newArr;
                    machineObj.value.secondTitle = childArr;
                    machineObj.value.childCont = listenChild;
                } else {
                    Message.error(res.message);
                }
            })
        };
        const pageData = reactive<{
            isShowSet: boolean;
            isShowList: boolean;
            loading: boolean;
            machinList: any[];
            fieldList: any[];
        }>({
            isShowSet: false,
            isShowList: false,
            loading: false,
            machinList: [],
            fieldList: [],
        });

        const sideOk = async () => {
            if (setForm.machineCode) {
                await machineApi.dyeChangeMachine({ ...setForm }).then((res: any) => {
                    if (res.code === 200) {
                        Message.success(res.message);
                        pageData.isShowSet = false
                        selectHandler();
                    } else {
                        Message.error(res.message);
                    }
                })
            } else {
                Message.error('目标设备编号必填');
            }

        };
        const saveHandler = () => {

        };
        const cardForm = reactive<{
            flowCardCode: string,
            planOrderCode: string,
            customName: string,
            auditState: number,
            startDate: string,
            endDate: string,
        }>({
            flowCardCode: '',
            planOrderCode: '',
            customName: '',
            startDate: '',
            endDate: '',
            auditState: 0,
        });
        const changeDate = (date: any) => {
            cardForm.startDate = date ? date[0] : '';
            cardForm.endDate = date ? date[1] : '';
        };
        const selectCardHandler = async () => {
            await machineApi.drawMachine({ page: pagination.page, limit: pagination.pageSize, ...cardForm }).then((res: any) => {
                if (res.code === 200) {
                    table.handleSuccess(res.data.data);
                    gridOption.value.setRowData(res.data.data);
                    total.value = res.data.total;
                } else {
                    Message.error(res.message);
                }
            })
        };
        const table = useTable();
        const pagination = usePagination(selectCardHandler);
        //表格方面
        const gridOption = ref();
        const gridReady = (params: any) => {
            gridOption.value = params.api;
            //调整表格自适应大小
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width: 150
        };
        let cfsValue: any = [
            {
                headerName: "流转卡号",
                field: "flowCardCode",
            },
            {
                headerName: "布名",
                field: "greyCode",
            },
            {
                headerName: "品名",
                field: "productName",
            },
            {
                headerName: "颜色深浅",
                field: "colorDepth",
            },
            {
                headerName: "缸型",
                field: "cylinderType",
            },
            {
                headerName: "匹数",
                field: "houseNum",
            },
            {
                headerName: "重量",
                field: "flowCardWeight",
            },
            {
                headerName: "单位",
                field: "unit",
            },
            {
                headerName: "订单号",
                field: "dyeOrderCode",
            },
            {
                headerName: "客户名称",
                field: "customOrderName",
            },
            {
                headerName: "订单交期",
                field: "orderDate",
            },
            {
                headerName: "订单条款",
                field: "anxiousOrderType",
            },
            {
                headerName: "订单重量",
                field: "orderWeight",
            },
            {
                headerName: "染色类型",
                field: "dyeingType",
            },
            {
                headerName: "车间",
                field: "workshop",
            },
            {
                headerName: "生产交期",
                field: "productionDate",
            },

        ];
        const localeTextData: any = ref(localeText);
        const changeSeat = (aHeadData: any, backData: any) => {
            Modal.confirm({
                title: "系统提示",
                content: "确认移动选中的生产位置吗？",
                async onOk() {
                    let cardList: any[] = [{ ...aHeadData }, { ...backData }]
                    await machineApi.getShiftMachine({ ...searchData, cardList }).then((res: any) => {
                        if (res.code === 200) {
                            Message.success('数据移动成功');
                            selectHandler();
                        } else {
                            Message.error(res.message);
                        }
                    })
                }
            })

        }
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            selectCardHandler();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            selectCardHandler();
        }
        const setMachine = (code: any) => {
            setForm.flowCardCode = code;
            pageData.isShowSet = true;
        };

        const cancelProd = (flowCardCode: any) => {
            Modal.confirm({
                title: "系统提示",
                content: "是否取消排缸",
                async onOk() {
                    let data = [{ flowCardCode, schedulState: 0 }];

                    // let cardList:any[] = [{...aHeadData},{...backData}]
                    await machineApi.cancelSchedul([...data]).then((res: any) => {
                        if (res.code === 200) {
                            Message.success(res.message);
                            selectHandler();
                        }
                    })
                }
            })
        };

        const setHant = (colorSatus: any, flowCardCode: any) => {
            // if(colorSatus)
            Modal.confirm({
                title: "系统提示",
                content: `是否${colorSatus === 4 ? '取消停机状态' : "进入停机状态"}`,
                async onOk() {
                    let status = colorSatus === 4 ? 0 : 1;
                    await machineApi.dyeStop({ status, flowCardCode }).then((res: any) => {
                        if (res.code === 200) {
                            Message.success(res.message);
                            selectHandler();
                        }
                    })
                }
            })
        };

        const confirmDye = (flowCardCode: any) => {
            Modal.confirm({
                title: "系统提示",
                content: "是否确认染色完成",
                async onOk() {
                    await machineApi.finallyOver({ schedulState: 3, flowCardCode }).then((res: any) => {
                        if (res.code === 200) {
                            Message.success(res.message);
                            selectHandler();
                        }
                    })
                }
            })
        }

        //下拉数据
        const options = ref<any>();
        const loading = ref(false);
        const searchHandler = async (value: any, index: number) => {
            if (value) {
                loading.value = true;
                await selectAwait(index, value, (data: any) => {
                    options.value = data;
                });

                loading.value = false;
            } else {
                options.value = [];
            }
        };
        const selectAwait = async (selectIndex: number, value: any = '', cb = (data: any) => { return data }) => {
            switch (selectIndex) {
                case 1:
                    //获取客户名称下拉列表信息数据
                    await otherMachineFn().getDyeSelect({ machinType: value }).then(res => {
                        if (res.code === 200) {
                            pageData.machinList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 2:
                    //获取复样类型下拉列表信息数据
                    await otherMachineFn().getFieldList({ field: value }).then(res => {
                        if (res.code === 200) {
                            pageData.fieldList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
            }
        };
        let cardList: any = [];

        //点击 移动 选择 
        // let isFlag = false;

        // let box: any = null;
        // let oldLeft = 0; //鼠标按下时的位置
        // let oldTop = 0;
        // let moveSelected: any = document.getElementById("moveSelected");//选区
        // let moveSelectObj = reactive<{
        //     top: string,
        //     left: string,
        //     height: string,
        //     width: string,
        //     bottom: string,
        //     right: string
        // }>({
        //     top: '0px',
        //     left: '0px',
        //     height: '0px',
        //     width: '0px',
        //     bottom: '0px',
        //     right: '0px'
        // })
        // const downFlagMove = (e: any) => {
        //     isFlag = true;
        //     box = e;
        //     moveSelectObj.top = e.pageY + 'px';
        //     moveSelectObj.left = e.pageX + 'px';
        //     oldLeft = e.pageX;
        //     oldTop = e.pageY;
        //     // box.onmousemove()
        // };

        // const toHasMove = (e: any) => {
        //     if (!isFlag) return;
        //     if (e.pageX < oldLeft) { //表示左移
        //         moveSelectObj.left = e.pageX + 'px';
        //         moveSelectObj.width = (oldLeft - e.pageX) + 'px'; //向左移动的距离作为选区的宽
        //     } else {
        //         moveSelectObj.width = (e.pageX - oldLeft) + 'px';
        //     }
        //     if (e.pageY < oldTop) { //向上移动
        //         moveSelectObj.top = e.pageY + 'px';
        //         moveSelectObj.height = (oldTop - e.pageY) + 'px';
        //     } else {
        //         moveSelectObj.height = (e.pageY - oldTop) + 'px';
        //     };
        //     moveSelectObj.bottom = Number(moveSelectObj.top.split('px')[0]) + Number(moveSelectObj.height.split('px')[0]) + 'px';
        //     moveSelectObj.right = Number(moveSelectObj.left.split('px')[0]) + Number(moveSelectObj.width.split('px')[0]) + 'px';


        // }

        const selectCell = (e: any, index: number, cIndex: number) => {
            machineObj.value.childCont[index][cIndex].selected = true;
            let { flowCardCode } = machineObj.value.childCont[index][cIndex]
            cardList.push({ flowCardCode, cXy: `${index}` + cIndex });
            cardList = cardList.filter((v: any) => v.cXy !== (`${index}` + cIndex));
            // let left = e.offsetLeft + box.offsetLeft;
            // let right = e.offsetWidth + left;
            // let top = e.offsetTop + box.offsetTop;
            // let bottom = e.offsetHeight + top;
            // //判断是否在选择区
            // let leftCover = moveSelectObj.left.split('px')[0] <= left && left <= moveSelectObj.right.split('px')[0];
            // let rightCover = moveSelectObj.left.split('px')[0] <= right && right <= moveSelectObj.right.split('px')[0];
            // let topCover = moveSelectObj.top.split('px')[0] <= top && top <= moveSelectObj.bottom.split('px')[0];
            // let bottomCover = moveSelectObj.top.split('px')[0] <= bottom && bottom <= moveSelectObj.bottom.split('px')[0];
            // if ((leftCover || rightCover) && (topCover || bottomCover)) {
            //     // e.checked = true;//激活复选框
            //     console.log( machineObj.value.childCont[index])
            // }else{
            //     machineObj.value.childCont[index][cIndex].selected = false
            // }
        };

        const toCancelSelect = (index: number, cIndex: number) => {
            machineObj.value.childCont[index][cIndex].selected = false;
            cardList = cardList.filter((v: any) => v.cXy !== (`${index}` + cIndex));
            visible.value = false;
        }

        const toCancelAllSelect = () => {
            machineObj.value.childCont.forEach((v: any) => {
                v.forEach((vItem: any) => {
                    vItem.selected = false;
                });
            });
            cardList = [];
            visible.value = false;
        }

        const setOnCard = async () => {
            if (cardList.length > 0) {
                let card = cardList.map((item: any) => {
                    return {
                        flowCardCode: item.flowCardCode
                    }
                });
                let res: any = await machineApi.dyeTogether({ card });
                if (res.code === 200) {
                    Message.success(res.message);
                    selectHandler();
                } else {
                    Message.error(res.message);
                }
            } else {
                Message.error({
                    content: "请点击选择需要进行拼缸的数据",
                    duration: 5000,
                });
            }
        }
        const setOnCardCancel = () => {
            if (cardList.length > 0) {
                let card = cardList.map((item: any) => {
                    return {
                        flowCardCode: item.flowCardCode
                    }
                });
                console.log(card);
            } else {
                Message.error({
                    content: "请点击选择需要进行取消拼缸的数据",
                    duration: 5000,
                });
            }
        }

        // const clearSelect = () => {
        //     if (!isFlag) return;
        //     isFlag = false;
        //     moveItems = [];
        //     moveSelectObj.width = '0px';
        //     moveSelectObj.height = '0px';
        //     moveSelectObj.top = '0px';
        //     moveSelectObj.left = '0px';
        //     moveSelectObj.bottom = '0px';
        //     moveSelectObj.right = '0px';
        // }

        return {
            headerShow,
            searchData,
            changHeadShow,
            selectHandler,
            pageData,
            setForm,
            sideOk,
            saveHandler,
            cardForm,
            selectCardHandler,
            pagination,
            table,
            localeTextData,
            cfsValue,
            defaultColDef,
            gridReady,
            machineObj,
            changeSeat,
            setOnCard,
            setOnCardCancel,
            changeDate,
            total,
            changePage,
            changeSize,
            visible,
            setMachine,
            cancelProd,
            setHant,
            confirmDye,
            loading,
            options,
            selectAwait,
            searchHandler,
            // downFlagMove,
            toCancelSelect,
            toCancelAllSelect,
            // toHasMove,
            // clearSelect,
            selectCell
        };
    },
    components: { PageTabelLayout,  }
}
</script>

<style lang="less" scoped>
.main-container {
    height: 100%;
}

#moveSelected {
    position: fixed;
    top: 0;
    left: 0;
    border: 1px dashed #2783F5;
    pointer-events: none;
}

.arco-drawer-header .arco-drawer-title {
    width: 100%;
}


.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.aInputLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}

.pageTabel {
    padding: 10px;
    box-sizing: border-box;
}

.tableBox {
    margin-top: 20px;
    // overflow-y: auto;
    height: 100%;
    width: 100%;

    .leftHead {
        width: 100px;
        text-align: center;
    }

    .tablesHeadFirst {
        background-color: rgb(238, 246, 255);
        padding: 10px 0px;

        // display: flex;
        .tablesItems {
            display: inline-block;
        }
    }
}

.contClick {
    &:hover {
        cursor: pointer;
        color: #1e80ff
    }
}
</style>
